{extend name="$admin_layout" /}
{block name="content"}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/statistics/css/base.css">
    <link rel="stylesheet" href="/static/statistics/css/orderDetail.css">
    <!-- element -->
    <link rel="stylesheet" href="/static/plugins/element-ui/element-ui.css">
    <!-- vue -->
    <script src="/static/plugins/vue/vue.min.js"></script>
    <!-- 引入组件库 element -->
    <script src="/static/plugins/element-ui/element-ui.js"></script>
    <style>
        .btn-list{
            margin-bottom: 20px;
        }
        .el-button{
            padding: 5px 10px;
        }
        .box-drawer{
            padding: 25px;
        }
        .box-drawer-btn{
            display: flex;
            justify-content: center;
            height: 80px;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="el">
        <div class="fu-order-detail-tips">{:lang('生成发货单')}</div>
        <!-- 订单基本信息 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{:lang('订单基本信息')}</span>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('订单号')}：</span>
                        <span>{$order_info.order_sn}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('订单类型')}：</span>
                        <span>{$order_info.order_type_name}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('订单状态')}：</span>
                        <span class="fu-el-col-status">{$order_info.order_status}</span>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('会员姓名')}：</span>
                        <span>{$order_info.user.user_name}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('会员手机')}：</span>
                        <span>{$order_info.user.mobile}</span>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('商品金额')}：</span>
                        <span>￥{$order_info.order_money}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('会员折扣')}：</span>
                        <span>- ￥0.00</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('货币')}：</span>
                        <span>CNY</span>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('运费')}：</span>
                        <span>￥{$order_info.express_price}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('优惠券减免')}：</span>
                        <span>- ￥{$order_info.coupon_money}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('货币汇率')}：</span>
                        <span>1</span>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('优惠总金额')}：</span>
                        <span style="display: flex;"><span>￥{$order_info.coupon_money}</span><span class="fu-el-col-tips-js">({:lang('包含优惠券')}，{:lang('满折')}，{:lang('满减等优惠金额')})</span></span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('支付积分')}：</span>
                        <span>{$order_info.cost_integral}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('下单时间')}：</span>
                        <span>{$order_info.create_time}
                        </span>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('应付总金额')}：</span>
                        <span>￥{$order_info.order_money}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('实付总金额')}：</span>
                        {if condition="$order_info['order_type'] == 7"}
                        {if condition="$order_info['pay_status'] == 1"}
                        <span>￥{$order_info.payable_money}</span>
                        {/if}
                        {if condition="$order_info['pay_status'] == 2"}
                        <span>￥{$order_info.order_money}</span>
                        {/if}
                        {else/}
                        <span>￥{$order_info.payable_money}</span>
                        {/if}
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('更新时间')}：</span>
                        <span>{$order_info.update_time}
                        </span>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 优惠明细 -->
<!--        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>优惠明细</span>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">会员价：</span>
                        <span>优惠￥0.01</span>
                    </el-col>
                    
                </el-row>
            </div>
        </el-card>-->
        <!-- 支付信息 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{:lang('支付信息')}</span>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('交易单号')}：</span>
                        <span>3235736000194146</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('支付状态')}：</span>
                        <span>
                            {$order_info.pay_status_name}
                        </span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('交易流水号')}：</span>
                        <span>{$order_info.transaction_id}</span>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('实付金额')}(RMB)：</span>
                        {if condition="$order_info['order_type'] == 7"}
                        {if condition="$order_info['pay_status'] == 1"}
                        <span>￥{$order_info.payable_money}</span>
                        {/if}
                        {if condition="$order_info['pay_status'] == 2"}
                        <span>￥{$order_info.order_money}</span>
                        {/if}
                        {else/}
                        <span>￥{$order_info.payable_money}</span>
                        {/if}
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('支付积分')}：</span>
                        <span>{$order_info.cost_integral}</span>
                    </el-col>
                    {if !empty($order_info.pay_type)}
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('支付类型')}：</span>
                        <span>{$order_info.pay_type}</span>
                    </el-col>
                    {/if}
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('交易时间')}：</span>
                        <span>{$order_info.pay_time|date="Y-m-d H:i:s"}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('交易结束时间')}：</span>
                        <span>{$order_info.pay_time|date="Y-m-d H:i:s"}</span>
                    </el-col>
                </el-row>
            </div>
            
        </el-card>
        <!-- 商品清单 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{:lang('商品清单')}</span>
            </div>


            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="date"
                    label="{:lang('商品图片')}"
                    >
                    <template slot-scope="scope">
                        <img :src="scope.row.goods_thumb" alt="" class="fu-table-img">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="goods_name"
                    show-overflow-tooltip
                    label="{:lang('商品名称')}"
                   >
                </el-table-column>
                <el-table-column
                        prop="goods_sn"
                        label="{:lang('货号')}">
                </el-table-column>
                <el-table-column
                    prop="sku_name"
                    label="{:lang('规格')}">
                </el-table-column>
                <el-table-column
                    prop="shop_price"
                    label="{:lang('单价')}">
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="{:lang('数量')}">
                </el-table-column>
<!--                <el-table-column
                    prop="goods_money"
                    label="{:lang('总原价')}(元)">
                </el-table-column>-->
                <el-table-column
                    prop="goods_money"
                    label="{:lang('总支付价')}(元)">
                </el-table-column>
<!--                <el-table-column
                    prop="address"
                    label="{:lang('总优惠')}(元)">
                </el-table-column>-->
<!--                <el-table-column
                    prop="address"
                    label="{:lang('货币')}">
                </el-table-column>-->
<!--                <el-table-column
                    prop="address"
                    label="{:lang('货币汇率')}">
                </el-table-column>-->
            </el-table>
        </el-card>
        <!-- 物流信息 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{:lang('物流信息')}</span>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <span class="fu-el-col-tips">{:lang('收货人信息')}：</span>
                        <span>{$order_info.receiver_name},
                              {$order_info.receiver_mobile},
                              {$order_info.province},
                              {$order_info.city},
                              {$order_info.district},
                              {$order_info.receiver_address}
                        </span>
                    </el-col>    
                </el-row>
            </div>
        </el-card>
        <!-- 分润信息 -->
<!--        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>分润信息</span>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">分润门店类型：</span>
                        <span>自营门店分润</span>
                    </el-col>  
                    <el-col :span="8">
                        <span class="fu-el-col-tips">分润总金额：</span>
                        <span>￥0</span>
                    </el-col>   
                </el-row>
            </div>
        </el-card>-->
        <input type="hidden" id="order_goods" name="order_goods" value="{$order_info.order_goods}">
        <input type="hidden" id="sender_list" name="sender_list" value="{$sender_list}">
        <input type="hidden" id="express_company" name="express_company" value="{$express_company}">
        <input type="hidden" id="sender_company" name="sender_company" value="{$sender_company}">
        <!--<div class="invoice-textarea-wrap">-->
            <!--<div class="invoice-textarea">-->
                <!---->
            <!--</div>-->
        <!--</div>-->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{:lang('操作信息')}</span>
            </div>
            <form action="/admin.php/order/express/create_express_operation" method="post">
<!--            <div style="margin-bottom: 10px;display: flex;justify-content: flex-start;padding-left: 200px;width: 800px;align-items: center;">
                <div style="width: 100px;text-align: right;">选择供货商：</div>
                <div style="width: 600px;">
                    <el-select v-model="senderValue" placeholder="请选择">
                        <el-option
                                v-for="item in sender_list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>-->
            <div style="margin-bottom: 10px;display: flex;justify-content: flex-start;padding-left: 200px;width: 800px;align-items: center;">
                <div style="width: 150px;text-align: right;">{:lang('选择快递公司')}：</div>
                <div style="width: 600px;">
                    <el-select v-model="expressValue" placeholder="{:lang('请选择')}">
                        <el-option
                                v-for="item in express_company"
                                :key="item.aid"
                                :label="item.name"
                                :value="item.aid">
                        </el-option>
                    </el-select>
                </div>
            </div>
                <div style="margin-bottom: 10px;justify-content: flex-start;padding-left: 200px;width: 800px;display: none">
                    <div style="width: 150px;text-align: right;">{:lang('选择发货人')}：</div>
                    <div style="width: 600px;">
                        <el-select v-model="senderValue" placeholder="{:lang('请选择')}">
                            <el-option
                                    v-for="item in sender_company"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            <div style="margin-bottom: 10px;display: flex;justify-content: flex-start;padding-left: 200px;width: 800px">
                <div style="width: 100px;text-align: right;">{:lang('操作备注')}：</div>
                <div style="width: 600px;">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 8 }"
                            placeholder="{:lang('请输入内容')}"
                            v-model="textarea">
                    </el-input>
                </div>
            </div>
                <input type="hidden" value="{$order_info.order_sn}" name="order_sn">
                <input type="hidden" :value="expressValue" name="express_company">
                <input type="hidden" :value="senderValue" name="sender_company">
                <input type="hidden" :value="textarea" name="remark">
            <div style="margin-bottom: 10px;display: flex;justify-content: space-between;padding-left: 290px;width: 800px;margin-bottom: 20px;">
                <div>
                    <button type="submit" class="el-button el-button--default el-button--primary " value="submit">{:lang('确认生成发货单')}</button>
                    <!--<el-button >取消</el-button>-->
                    <!--<el-button type="primary">主要按钮</el-button>-->
                    <!--<el-button type="primary">主要按钮</el-button>-->
                </div>
                <!--<div>-->
                    <!--<el-button >主要按钮</el-button>-->
                <!--</div>-->
            </div>

           </form>
            <el-table
                    :data="tableList"
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="{:lang('操作者')}"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="{:lang('操作时间')}"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="{:lang('订单状态')}">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="{:lang('付款状态')}">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="{:lang('发货状态')}">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="{:lang('备注')}">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</body>
<script>
    let sender_list = JSON.parse($('#sender_list').val());
    let express_company = JSON.parse($('#express_company').val());
    let sender_company = JSON.parse($('#sender_company').val());
    let senderValue = sender_company.length>0 ?sender_company[0].id:'';
    let expressValue = express_company.length>0 ?express_company[0].aid:'';
    let order_goods = JSON.parse($('#order_goods').val());
    console.log(order_goods)
    new Vue({
        el: '#el',
        data() {
            return {
                tableData:order_goods|| [],
                drawer:false,
                direction: 'rtl',
                textarea2:'',
                textarea:'',
                type:1,
                tableList:[],
                sender_list:sender_list || [],
                express_company:express_company || [],
                sender_company:sender_company || [],
                senderValue:senderValue,
                expressValue:expressValue,
                value: ''
            }
        },
        mounted() {

        },
        methods: {
            handleClose(done) {
                this.$confirm("{:lang('确认关闭')}"+'？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            cancel(){
                this.drawer = false;
            },
            openDrawer(type){
                this.drawer = true;
                this.type = type;
            }
        },
    })
</script>

</html>
{/block}